

// jsx 是用来给组件提供视图模板的
// let box = (
//      <div>
//     <h1>Hello <React></React></h1>
//     </div>
// )

// A必须大写 小写a表示函数 大写A表示组件
// 
// function DemoA( ) {
//     return box;
// }

// export default DemoA;

// _____________________________________________
// _____________________________________________
// import React from "react";
// function DemoA( ) {
//     return React.createElement(
//         'div',
//         {},
//         [
//             React.createElement('h1',{ key:1 },['Hello'])
//         ]
//     );
// }

// export default DemoA;
// _____________________________________________________________
// _____________________________________________________________
// _____________________________________________________________
// import React from "react";

// let box = (
//     <div className="box" title="hahaahha">
//         <span>我是span</span>
//         <a href="http://ml.com">kl</a>
//     </div>
// )

// function DemoA( ) {
//     return box
// }

// export default DemoA;
// 写成React.createElement的写法
// import React from "react";
// function DemoA() {

// return React.createElement(
//         "div",
//     {className:"box", title:"hahaahha"},
//     [
//         React.createElement("span",{ key:1 },"我是span"),  
//         React.createElement("a",{href:"http://ml.com",key:2},"ml")  
//     ]
// )
// }
// export default DemoA;
// _______________________________________________________________
// _______________________________________________________________
// _______________________________________________________________
// _______________________________________________________________
// import React from "react";
// function DemoA() {

// let view = React.createElement(
//         "div",
//     {className:"box", title:"hahaahha"},
//     [
//         React.createElement("span",{ key:1 },"我是span"),  
//         React.createElement("a",{href:"http://ml.com",key:2},"ml")  
//     ]
// )
// console.log(view);
// function DemoA() {
//     return view;
// }
// }
// export default DemoA;
// _______________________________________________________________________
// _______________________________________________________________________
// _______________________________________________________________________
// _______________________________________________________________________
// _______________________________________________________________________
// jsx元素写法有两种：
// jsx的形式
// React.createElement的形式
// 两种的形式，如下：
// import React from "react";
// let element1 = <div>我是一个孤独的div</div>
// let element2 = React.createElement("div",{},["我是一个孤独的div"])
// console.log(element1);
// console.log(element2);

// function DemoA() {
//     return element1
// }
// export default DemoA;
// ____________________________________________________________________________________
// ____________________________________________________________________________________
// ____________________________________________________________________________________
// ____________________________________________________________________________________
// ____________________________________________________________________________________
// ____________________________________________________________________________________
// 2，细节2
// jsx元素本质是一个对象，这个对象是不可变对象。代码如下：
// import React from "react";
// let element1 = <div>我是一个孤独的div</div>
// // jsx元素（对象） 这个对象是不可变对象  不能对真个对象中的属性进行修改
// console.log(element1);
// // 添加属性
// element1.name = "wc";
// // 修改属性
// element1.key = "110";
// // 删除属性
// delete element1.key;
// function DemoA() {
//     return element1
// }
// export default DemoA;
// 为什么人家在设计jsx元素时，设计成不可变对象呢？

// 答：你要知道jsx元素最终需要被渲染成真实DOM元素，所以不能直接操作"原材料"，只能使用它。

// 什么是jsx元素，什么是组件？

// 由class或function定义出来的叫组件，组件名必须大写
// 由jsx语法或React.createElement返回的结果叫jsx元素，jsx元素充当组件的视图模板
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 细节三
// 在jsx元素中，你要嵌套表达式，必须使用{}包起来，也就是说，在jsx元素中，看到{}你要知道里面放的都是表达式。任何有值的内容都是表达式。代码如下：
// import React from "react";
// let a = 110;
// function foo(){
//     return '${user.firstName}  ${user.firstName}'
// }
// function DemoA() {
//     return (
//         <div>
//             {/*{}放表达式 只要是值 都可以放在{} */}
//             <h3>{a+110}</h3>
//             {/*字符串拼接 后面的110是字符串*/}
//             <h3>{'${a}+110'}</h3>
//             <h3>{foo({firstName:"wn",lastName:"ci"})}</h3>
//         </div>
//     )
// }
// export default DemoA;
// ____________________________________________________________________________
// 细节四
// sx也可以做了函数的入参，也就是在调用一个函数时，传递传递一个jsx元素，也可以做为函数的返回值，还可以用在if或for中。
// import React from "react";
// function foo (arg) {
//     if(arg) {
//         return <div>{arg}</div>
//     } else {
//         return <div>我是默认值</div>
//     }
// }
// let ele = <strong>我是storng</strong>
// function DemoA() {
//     return (
//         <div>
//             <h3>
//                 {foo(110)}
//             </h3>
//             <h3>
//                 {foo()}
//             </h3>
//             <h3>
//                 {foo('hello')}
//             </h3>
//             <h3>
//                 {foo(<span>我是span</span>)}
//             </h3>
//             <h3>
//                 {foo(ele)}
//             </h3>
//             <h3>
//                 {foo()}
//             </h3>
//         </div>
//     )
// }
// export default DemoA;
// _____________________________________________________________________________________________________________
// 细节5
// jsx元素中有三个变化的属性：

// class 变成了 className
// for 变成了 htmlFor
// tabindex 变成了tabIndex
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 细节6
// jsx元素中新增了三个属性：

// key 用于列表渲染
// ref 方便DOM操作
// dangerouslySetInnerHTML 用来渲染一片html字符串
// 代码如下：
// import React from "react";
// let ele = '<div><a href="http://baidu.com">ml</a></div>';
// function DemoA(){
//     return (
//         <div>
//             {ele}
//             <hr />
//             <div dangerouslySetInnerHTML={{ _html: ele }}></div>
//         </div>
//     );
// }

// export default DemoA;

// ___________________________________________________________________
// 细节7
// jsx只能有一个根标签，如下：
// import React from "react";
// function DemoA(){
//         return (
            
//             // <div>我是一个div</div>
//             // <div>我是一个div</div>
//             // 报错
//             // 修改
//             <div>
//                 <div>我是一个div</div>
//                 <div>我是一个div</div>
//                 <div>我是一个div</div>
//                 <div>我是一个div</div>
//                 <div>我是一个div</div>
//             </div>
//         );
//     }
    
//     export default DemoA;
// _____________________________________________________________________________
// _____________________________________________________________________________
// _____________________________________________________________________________
// 细节8
// 在jsx元素，不仅组件可以使用单标签，任何html标签都可以使用单标签，如下：
// 在App.jsx中
// import React from "react";
// function DemoA(){
//             return (
//                 <div>
//                     <div style={{
//                         border:"2px solid red",
//                         height:"300px"
//                     }}>我是一个div</div>
//                 </div>
//             );
//         }
        
//         export default DemoA;
// _________________________________________________________________________________________
// _________________________________________________________________________________________
// _________________________________________________________________________________________
// 细节9
// 在JSX中写行内样式，格式如下：
// import React from "react";
// let a="box1"
// let b="box2"
// function DemoA(){
//             return (
//                 <div>
//                     <div className="box"></div>
//                     <div className={a}></div>
//                     <div className={'${a} ${b}' }></div>
//                     <div className="box" className="box200"></div>
//                     <div className="box" className={a}></div>
//                 </div>
//             );
//         }
        
//         export default DemoA;
// ————————————————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————————————————
// 细节10
// JSX中，所有React组件（由class或function定义）的名称必须以大写字母打头，如：
// import React from "react";
// function demob () {
//     return(
//         <div>demob组件</div>
//     )
// }
// function DemoB () {
//     return(
//         <div>DemoB组件</div>
//     )
// }
// export default DemoB;
// ______________________________________________________
// ______________________________________________________
// ______________________________________________________
// 细节 11
// JSX语法中是支持点语法的，如：
// React.Component
// React.Fragment
// ML.button
// ML.Form
// import React from "react";
// function DemoA () {
//     return(
//         <React.Fragment>
//          <div>DIV组件</div>
//         <div>DIV组件</div>
//         <div>DIV组件</div>
//         </React.Fragment>
       
//     )
// }
// export default DemoA;
// _________——————————————————————
// import React from "react";
// const ML={
//     // Button是一个组件
//     Button(){
//         return(<button>点</button>)
//     },
//     Form(){
//         return(<div>Form</div>)
//     }
// }
// function DemoA () { 
//     let {Button,Form} = ML;
//     return(
        
//         //  <div>
//         //     <ML.Button></ML.Button>
//         //     <ML.Form></ML.Form>
//         //  </div>
//         // 解构
       
//         <div>
//         <Button></Button>
//         <Form></Form>
//      </div>
        
       
       
//     )
// }
// export default DemoA;
// _____________________________________________________________
// _____________________________________________________________
// _____________________________________________________________
// _____________________________________________________________
// _____________________________________________________________
// 细节12
// 对于组件来说，props就是自定义属性，对于html标签来说，props是我们之前学习过的html标签的属性，props和vue一样，只能使用它，不要去修改它。代码如下：
// import React from "react";
// function Child() {
//     let {name,age,address} = props
//     return(
//         <div>
//             {name} : {age} : {address}
//         </div>
//     )
// }
// function DemoA () {
//     let data ={
//         name:"wn",
//         age:"20",
//         address:"hu"
//     }
//     return(
        
//          <div>
//             <Child 
//             name={data.name}
//             age={data.age}
//             address={data.address}
//             ></Child>
//          </div>    
//     );
// }
// export default DemoA;
// _________------------
// import React from "react";
// function Child(props) {
//     let {name,age,address} = props
//     return(
//         <div>
//             {name} : {age} : {address}
//         </div>
//     )
// }
// function DemoA () {
//     let data ={
//         name:"wn",
//         age:"20",
//         address:"hu"
//     }
//     return(
        
//          <div>
//             <Child 
//             {...data}
//             ></Child>
//          </div>    
//     );
// }
// export default DemoA;
// ——————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————
// ——————————————————————————————————————————————————————————————————
// 细节13
// 在使用组件时，如果组件使用双标签，在双标签之间就可以写内容，在双标签之间写的内容是通过props.children来接收的，props.children可以是任意类型的数据，基本数据类型可以，引用数据类型也可以，也可以是函数。代码如下
// ：
// import React from "react";
// function Child(props) {
//     console.log( props);
//     return(
//         <div>
//             子组件
//         </div>
//     )
// }
// function DemoA () {
    
//     return(
//          <div>
//             <Child >你好</Child>
//          </div>    
//     );
// }
// export default DemoA;
// ————————————————————————
// 在使用组件中写了双标签
// 在双标签写的内容可以传递给组件的props的子
// import React from "react";
// function Child(props) {
//     console.log( props);
//     return(
//         <div>
//             子组件
//         </div>
//     )
// }
// function DemoA () {
    
//     return(
//          <div>
//             <Child >你好</Child>
//             <Child >{true}</Child>
//             <Child ><div>Hello</div>
//             <span>span</span></Child>
//             <Child >{()=>{return 110}}</Child>
//             <Child >{()=>{return (<div>455</div>)}}</Child>
//             <Child >{()=>{(<div>455</div>)}}</Child>
       
//          </div>    
//     );
// }
// export default DemoA;
// ————————————————————————————————
// function Child(props) {
//     let {children} =props;
//     let res =null;
//     if(typeof children ==="function"){
//         res = children();
//     } else{
//         res = children;
//     }
//     return(
//         <div>
//            {res}
//         </div>
//     )
// }
// function DemoA () {
    
//     return(
//          <div>
//             <Child ><div>hello</div></Child>
//             <Child >{()=>(<div>455</div>)}</Child>
//          </div>    
//     );
// }
// export default DemoA;
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// ————————————————————————————————————————————————————————————————
// 细节14
// 在使用JSX时，如果是数组，可以直接渲染，如下：
// import React from "react";
// function DemoA() {
//     return(
//         <div>
//             <div>{["a","b","c"]}</div>
//         </div>
//     )
// }
// export default DemoA;
// __________________
import React from "react";
function DemoA() {
    return(
        <div>
            <div>{["a",
            "b",
            "c",
            110,
            null,
            ["aa"],
            (<div key="6">我是一个div</div>)
            ]}</div>
        </div>
    )
}
export default DemoA;










